<template>
  <div style="height:100%">
    <div id="editor">
      <div class="blog-edit-title">
        <span style="diaplay:inline-block; width:80px;">标题：</span>
        <el-input
          v-model="title"
          placeholder="请输入标题"
          maxlength="20"
          style="diaplay:inline-block;width:600px;"
        ></el-input>
      </div>
      <div class="blog-edit-outline">
        <span style="diaplay:inline-block;width:80px;">概述：</span>
        <el-input
          v-model="sketch"
          placeholder="请输入概述"
          type="textarea"
          style="diaplay:inline-block;width:600px;"
        ></el-input>
      </div>
      <div class="blog-edit-tag">
        <span style="diaplay:inline-block;width:80px;">分类：</span>
        <el-select v-model="tagValue" clearable placeholder="请选择">
          <el-option
            v-for="(item, index) in options"
            :key="index"
            :label="item"
            :value="item"
          >
          </el-option>
        </el-select>
      </div>
      <mavon-editor
        class="mavonEditor"
        :toolbars="toolbars"
        v-model="content"
      ></mavon-editor>
      <div style="text-align:center">
        <el-button type="primary" @click="editBlog">确定</el-button>
        <el-button @click="backToBlogManage" style="margin:10px"
          >取消</el-button
        >
      </div>
    </div>
  </div>
</template>

<style scoped>
#editor {
  /* width: 90%;
  margin-left: 5%; */
  margin-top: 50px;
  text-align: left;
  border-radius: 10px;
  padding: 20px;
  background: rgba(255, 255, 255, 0.8);
}

.blog-edit-title,
.blog-edit-outline,
.blog-edit-tag {
  margin: 10px;
  text-align: left;
}
</style>

<script>
import { mavonEditor } from "mavon-editor";
import "mavon-editor/dist/css/index.css";
import Vue from "vue";

export default {
  components: {
    mavonEditor
  },
  name: "BlogEditor",
  data() {
    return {
      id: 0,
      time: "",
      title: "",
      content: "",
      options: ["德语", "计算机", "日常"],
      tagValue: "",
      sketch: "",
      toolbars: {
        bold: true, // 粗体
        italic: true, // 斜体
        header: true, // 标题
        underline: true, // 下划线
        mark: true, // 标记
        superscript: true, // 上角标
        quote: true, // 引用
        ol: true, // 有序列表
        link: true, // 链接
        imagelink: false, // 图片链接
        help: true, // 帮助
        code: true, // code
        subfield: true, // 是否需要分栏
        fullscreen: true, // 全屏编辑
        readmodel: true, // 沉浸式阅读
        undo: true, // 上一步
        trash: true, // 清空
        save: true, // 保存（触发events中的save事件）
        navigation: true // 导航目录
      }
    };
  },
  created: function() {
    if (this.$route.query.id) {
      this.id = this.$route.query.id;
      console.log("blog-editor-id" + this.id);
    }
    //新建博客，所有内容为空就行,标签还是要有的
    let that = this;
    let qs = this.$qs;
    this.$http({
      url: "servlet/blog",
      method: "post",
      transformRequest: [
        function(data) {
          //在请求之前对data传参进行格式转换
          data = qs.stringify(data);
          return data;
        }
      ],
      data: {
        funcType: 12
      },
      headers: {
        "Content-Type": "application/x-www-form-urlencoded;charset=utf-8"
      }
    }).then(
      function(res) {
        console.log("show tag success");
        that.options = res.data.classList;
      },
      function(res) {
        console.log(res);
        console.log("啊呀，MBlog-getClass出错啦");
      }
    );

    //编辑博客初始内容
    if (this.id != 0) {
      let that = this;
      let qs = this.$qs;
      this.$http({
        url: "servlet/blog",
        method: "post",
        transformRequest: [
          function(data) {
            //在请求之前对data传参进行格式转换
            data = qs.stringify(data);
            return data;
          }
        ],
        data: {
          funcType: 3,
          id: that.id
        },
        headers: {
          "Content-Type": "application/x-www-form-urlencoded;charset=utf-8"
        }
      }).then(
        function(res) {
          console.log("show blog edit success");
          that.time = res.data.time;
          that.title = res.data.title;
          that.sketch = res.data.sketch;
          that.tagValue = res.data.class;
          that.content = res.data.content;
        },
        function(res) {
          console.log(res);
          console.log("啊呀，show blog edit出错啦");
        }
      );
    }
  },
  methods: {
    backToBlogManage() {
      this.$router.replace("/management/blogManage");
    },
    editBlog() {
      let funcType = 4; //create:4;edit:5
      if (this.id != 0) {
        console.log("id:" + this.id);
        funcType = 5;
      }

      var d = new Date();
      var time =
        "" +
        d.getFullYear() +
        "-" +
        (d.getMonth() +1)+
        "-" +
        d.getDate() +
        " " +
        d.getHours() +
        ":" +
        d.getMinutes() +
        ":" +
        d.getSeconds();

      let that = this;
      let qs = this.$qs;
      this.$http({
        url: "servlet/blog",
        method: "post",
        transformRequest: [
          function(data) {
            //在请求之前对data传参进行格式转换
            data = qs.stringify(data);
            return data;
          }
        ],
        data: {
          funcType: funcType,
          id: that.id,
          time: time,
          title: that.title,
          sketch: that.sketch,
          class: that.tagValue,
          content: that.content
        },
        headers: {
          "Content-Type": "application/x-www-form-urlencoded;charset=utf-8"
        }
      }).then(
        function(res) {
          console.log(" blog edit success");
        },
        function(res) {
          console.log(res);
          console.log("啊呀，blog edit出错啦");
        }
      );

      this.$message({
        message: "编辑成功",
        type: "success"
      });
      this.backToBlogManage();
    }
  }
};
</script>